<template>
    <BPMDialog ref="dialog" width="450px" height="144px">
        <div v-if="data.status == 0" style="padding:40px 20px 0px 20px">
            <el-progress :text-inside="true" :stroke-width="24" :percentage="data.percent" status="success" />
        </div>
        <table v-else>
            <tr>
                <td rowspan="2">
                    <el-icon color="#67C23A" :size="75">
                        <CircleCheckFilled />
                    </el-icon>
                </td>
                <td>
                    
                </td>
            </tr>
            <tr>
                <td>

                </td>
            </tr>
        </table>
    </BPMDialog>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import BPMDialog from "../components/BPMDialog.vue";
const dialog = ref(null);

const data = reactive({
    path: null,
    percent: 0,
    status: 1
});

const show = (title) => {
    dialog.value.show(title);
}

const hide = () => {
    dialog.value.hide();
}

onMounted(() => {
    let s = setInterval(() => {
        data.percent++;
        if (data.percent >= 100) {
            clearInterval(s);
            complete();
        }
    }, 200);
});

const complete = () => {
    dialog.value.setTitle("导出完成");
    // data.status = 1;
};

defineExpose({ show, hide });

</script>